(function () {
  var hotData = [
    {
      city: "广东", // 城市
      sales: "25, 179", // 销售额
      flag: false, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: "可爱多", num: "9,086", flag: true },
        { name: "娃哈哈", num: "8,341", flag: true },
        { name: "喜之郎", num: "7,407", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "6,724", flag: false },
        { name: "好多鱼", num: "2,170", flag: true }
      ]
    },
    {
      city: "河北",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "3,457", flag: false },
        { name: "娃哈哈", num: "2,124", flag: true },
        { name: "喜之郎", num: "8,907", flag: false },
        { name: "八喜", num: "6,080", flag: true },
        { name: "小洋人", num: "1,724", flag: false },
        { name: "好多鱼", num: "1,170", flag: false }
      ]
    },
    {
      city: "上海",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "2,345", flag: true },
        { name: "娃哈哈", num: "7,109", flag: true },
        { name: "喜之郎", num: "3,701", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "2,724", flag: false },
        { name: "好多鱼", num: "2,998", flag: true }
      ]
    },
    {
      city: "江苏",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "2,156", flag: false },
        { name: "娃哈哈", num: "2,456", flag: true },
        { name: "喜之郎", num: "9,737", flag: true },
        { name: "八喜", num: "2,080", flag: true },
        { name: "小洋人", num: "8,724", flag: true },
        { name: "好多鱼", num: "1,770", flag: false }
      ]
    },
    {
      city: "青岛",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "9,567", flag: true },
        { name: "娃哈哈", num: "2,345", flag: false },
        { name: "喜之郎", num: "9,037", flag: false },
        { name: "八喜", num: "1,080", flag: true },
        { name: "小洋人", num: "4,724", flag: false },
        { name: "好多鱼", num: "9,999", flag: true }
      ]
    }
  ];
  // 1先从`hotData`这个数组中将数据取出来，需要将数据渲染到页面上
  var li = "";
  $.each(hotData, function (index, item) {
    li += `
    <li>
        <span>${item.city}</span>
        <span>${item.sales} <s class=${item.flag ? "icon-up" : "icon-down"}></s></span>
    </li>
    `;
  });
  $(".province .sup").html(li);

  // 2. 需要给省份下面的所有的li注册鼠标经过的事件
  $(".province .sup").on("mouseenter", "li", function () {
    // 得到当前li的索引号 让它赋值给变量index
    index = $(this).index();
    render($(this));
  });
  // 第三步：当我们打开这个页面时 需要让第一个广东默认触发
  // 找到所有的省份然后从所有的找到第一个
  var lis = $(".province .sup li");
  lis.eq(0).mouseenter();

  // 第四步：让它自己动起来
  var index = 0;
  // 开启定时器
  var timer = setInterval(function () {
    index++;
    if (index >= lis.length) index = 0;
    // 让某一个li进行自动的触发mouseenter方法
    // lis.eq(index).mouseenter();
    render(lis.eq(index));
  }, 1000);

  // 第五步：需要经过 `.sup`盒子时 让定时器停止 鼠标离开就定时器重新执行

  // 我们采用`hover()`方法 这个方法里面有两个参数 每个参数都是一个匿名函数 表示鼠标经过鼠标离开
  $(".province .sup").hover(
    function () {
      // 鼠标经过
      clearInterval(timer);
    },
    function () {
      // 鼠标离开
      clearInterval(timer);

      timer = setInterval(function () {
        index++;
        if (index >= lis.length) index = 0;
        // 让某一个li进行自动的触发mouseenter方法
        // lis.eq(index).mouseenter();
        render(lis.eq(index));
      }, 1000);
    }
  );

  // 封装函数
  function render(obj) {
    // 给当前经过的`li`添加类名为 `active`同时将的兄弟身上的类名移除掉
    obj.addClass("active").siblings("li").removeClass("active");
    // 需要经过时获取当前的索引号
    var index = obj.index();
    // 找到对应省份的数据
    var data = hotData[index].brands;
    // 渲染到右边 遍历数组
    var li = "";
    $.each(data, function (index, item) {
      li += `
    <li>
        <span>${item.name}</span>
        <span>${item.num} <s class=${item.flag ? "icon-up" : "icon-down"}></s></span>
    </li>
 `;
    });
    // 渲染到右边
    $(".province .sub").html(li);
  }
})();
